<template>
  <div id="qixiLu">
    <div class="top">
      <div class="item" @click="showPaiClick">排行榜</div>
      <div class="item" @click="showRuleClick">活动规则</div>
    </div>
    <div class="lu">
        <div id="luBtn" class="ing" @click="startTouch($event)">
            <img v-if="isJing" :src="luImag" />
            <div v-else class="wave ripple danger">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="content"></div>
            </div>
        </div>
        <div class="reing shiting" @click="shitingClick">试听</div>
        <div class="reing" @click="endTouch">结束</div>
    </div>
    <div class="luTime">{{textStr}}</div>
    <!-- 上传 -->
    <div class="btn" @click="uploadClick"></div>
    <!-- 活动规则 -->
    <qixiguide></qixiguide>
    <!-- 排行榜-->
    <qixipai></qixipai>
    <!-- 判断手机号 -->
    <div class="modal2" v-if="isShow2">
        <div class="modal-body">
            <div class="title">联系方式</div>
            <div class="text">每日排名第一的玩家，即获得秒台车免费代送给ta的鲜花一束，
                快准备好您的信息，冲击榜单吧!</div>
            <div class="line">
              <label>姓名</label>
              <input v-model="username" maxlength="8" placeholder="输入姓名" />
            </div>
            <div class="line">
              <label>手机</label>
              <input v-model="tel" type="tel" style="margin-bottom: 20px;" placeholder="输入手机号" />
            </div>
            <div @click="isShow2 = false" class="cancleBtn">取消</div>
            <div @click="okBtnClick" class="okBtn">确定</div>
        </div>
    </div>
  </div>
</template>

<script>
import Qixiguide from '@/components/common/qixguide.vue'
import Qixipai from '@/components/common/paihang.vue'
export default {
  name: 'qixiLu',
  data () {
    return {
        isJing: true,
        luImag: require('../../assets/images/icon_luyin.png'),
        voiceSrc: '',
        timer1: 0,  // 开始的时间戳
        timer2: 0,  // 结束的时间戳
        timer: 0,   // 录音时长
        clockArr: [], // 时钟
        textStr: '点击开始录音',
        serverId: '',
        usertel: '',
        isShow2: false,
        tel: '',
        username: '',
        wexinInfo: {},
        localId: '',
        isReady: false,
    }
  },
  components: {
    Qixiguide,
    Qixipai,
  },
  mounted(){

  },
  activated(){
    this.wexinInfo = JSON.parse(localStorage.getItem('wexinInfo'));
    this.wx_config();
  },
  watch:{
    timer:function(cVal,oVal){
      this.textStr = '已经录音 ' + cVal + 's';
    }
  },
  methods: {
    // 显示规则
    showRuleClick:function(){
      this.$HUB.$emit('showGuide');
    },
    isTelOK: function(){
      var self = this;
      self.$axios.get('userInfo3',{
        params: {
          openid: self.wexinInfo.openid || ''
        }
      }).then(function (res){
        if(res.data.status == 100){
          self.usertel = res.data.data.usertel;
          if (self.usertel == '') {
            self.isShow2 = true;
          }else{
            self.isShow2 = false;
            setTimeout(function(){
                self.$HUB.$emit('showPai');
            },200);
          }
        }else{
            self.isShow = true;
        }
      }).catch(function (err){

      })
    },
    // 确定输入手机号
    okBtnClick: function(){
      var self = this;
      if (self.username == '') {
        alert('请输入您的姓名');
        return;
      }
      if (!self.$utils.checkTel(self.tel)) {
        alert('请输入正确的手机号');
        return;
      }
      self.$axios.get('adduserInfo3',{
        params: {
          openid: self.wexinInfo.openid || '',
          usertel: self.tel,
          username: self.username
        }
      }).then(function (res){
        self.isShow2 = false;
        setTimeout(function(){
          self.$HUB.$emit('showPai');
        },200);
      }).catch(function (err){

      })
    },
    // 显示排行榜
    showPaiClick: function(){
      this.isTelOK();
    },
    // 试听
    shitingClick: function(){
      var self = this;
      if(self.voiceSrc == '')return;
      wx.playVoice({
        localId: self.localId // 需要播放的音频的本地ID，由stopRecord接口获得
      });
    },
    // 上传按钮点击事件
    uploadClick: function(){
      var self = this;
			// alert(self.voiceSrc);
      if(self.voiceSrc != ''){
        // var loading = weui.loading('上传中');
        self.$axios.get('upload',{
          params: {
            openid: self.wexinInfo.openid || '',
            nickname: self.wexinInfo.nickname || '',
            headimgurl: self.wexinInfo.headimgurl || '',
            voiceUrl: self.voiceSrc || '',
            lgTime: self.timer || '0',
          }
        }).then(function (res){
          // loading.hide();
          weui.confirm('表达真爱的机会只有一次，确认上传吗？', {
            title: '温馨提示',
            buttons: [{
              label: '再想想',
              type: 'default',
              onClick: function(){
                weui.toast('取消按钮');
              }
            }, {
              label: '确定',
              type: 'primary',
              onClick: function(){
                self.$router.push({
                  path:'/qixiResult',
                  query:{
                    openid: self.wexinInfo.openid || '',
                  }
                });
              }
            }]
          });
        }).catch(function (err){})
      }
    },

    // 开始录音 luBtn
    startTouch: function(e){
      if (this.isReady == false)return;
      this.isJing = false;
      var self = this;
      self.timer = 0;
      for (let i = 0; i < this.clockArr.length; i++) {
        clearInterval(this.clockArr[i]);
      }
      this.clockArr = [];
      var clock = setInterval(function(){
        self.timer = self.timer + 1;
        if (self.timer >= 60) {
          self.timer = 60;
          self.endTouch();
        }
      },1000);
      this.clockArr.push(clock);
      wx.startRecord({
        fail:function(res){
          // alert(res.errMsg);
        },
        success: function(res) {
          // alert(res);
        }
      });
    },

    // 结束录音
    endTouch: function(e){
      var self = this;
      for (let i = 0; i < this.clockArr.length; i++) {
        clearInterval(this.clockArr[i]);
      }
      this.clockArr = [];
      this.isJing = true;
      wx.stopRecord({
				fail:function(res){
          // alert(res.errMsg);
        },
        success: function (res) {
					// alert("成功结束录音");
          var localId = res.localId;
          self.localId = res.localId;
          // 语音上传
          wx.uploadVoice({
            localId: localId, // 需要上传git的音频的本地ID，由stopRecord接口获得
            isShowProgressTips: 0, // 默认为1，显示进度提示
            success: function (res) {
              var serverId = res.serverId; // 返回音频的服务器端ID
              self.$axios.get('voice',{
                params: {
                  serverId: serverId
                }
              }).then(function (res){
                // alert(JSON.stringify(res.data));
                var voiceSrc = res.data.imageUrl;
                self.voiceSrc = voiceSrc;
              }).catch(function (err){

              })
            }
          })
        }
      });
    },
    // 重录
    reLuYin: function(){
      this.startTouch();
    },
    // 微信配置
    wx_config: function(){
      var self = this;
      var pageUrl = self.$utils.getBaseUrl();
      self.$axios.get('wx_config2',{
        params: {
          pageUrl: pageUrl
        }
      }).then(function (res){
      	 var data = res.data;
        wx.config({
          debug: false,
          appId: data.appId,
          timestamp: data.timestamp,
          nonceStr: data.nonceStr,
          signature: data.signature,
          jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'startRecord',
            'stopRecord',
            'onVoiceRecordEnd',
            'playVoice',
            'uploadVoice']
        });
        wx.ready(function(){
          self.isReady = true;
          self.$utils.shareData2.link = self.$utils.shareLink2;
          // 微信好友分享
          wx.onMenuShareAppMessage(self.$utils.shareData2);
          // 朋友圈分享
          wx.onMenuShareTimeline(self.$utils.shareData2);
        });
				wx.error(function(res){
					// alert(res.errMsg);
				});
      }).catch(function (error) {

      });
  	},
  },
}
</script>
<style scoped lang="less">
.modal2{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  .modal-body{
    width: 750px;
    height: 1037px;
    border-radius: 12px;
    margin: auto;
    text-align: center;
    font-size: 40px;
    color: #333333;
    padding-bottom: 20px;
    background-image: url(../../assets/images/qi_guide_02.png);
    background-position: center center;
    background-size: 750px 1037px;
    background-repeat: no-repeat;
    .title{
      color: #5c2424;
      padding-top: 22px;
    }
    .text{
        font-size: 30px;
        color: #444444;
        margin: auto;
        text-align: left;
        width: 500px;
        padding-top: 20px;
        line-height: 50px;
        margin-bottom: 30px;
        color: #5c2424;
    }
    .line{
      label {
        display: inline-block;
        width: 120px;
        margin-bottom: 40px;
        color: #5c2424;
      }
      input {
        margin-top: 20px;
        padding: 0 10px;
        height: 88px;
        line-height: 88px;
        border: solid 1px #999999;
        outline: none;
        border-radius: 8px;
        width: 400px;
        border: solid 1px #873636;
        border-radius: 4px;
      }
    }
    .cancleBtn{
      display: inline-block;
      width: 180px;
      height: 80px;
      line-height: 80px;
      box-shadow: 0 0 0 1px #cb5364;
      border-radius: 30px;
      border: solid 3px white;
      background-color: #cb5364;
      border-radius: 40px;
      color: white;
      font-size: 30px;
      margin-top: 50px;
    }
    .okBtn{
      width: 180px;
      height: 80px;
      line-height: 80px;
      display: inline-block;
      box-shadow: 0 0 0 1px #cb5364;
      border-radius: 30px;
      border: solid 3px white;
      background-color: #cb5364;
      border-radius: 40px;
      color: white;
      font-size: 30px;
      margin-top: 50px;
    }
  }
}
#qixiLu{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url('../../assets/images/bg02.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.top{
  color: #873636;
  font-size: 28px;
  height: 40px;
  margin-right: 40px;
  margin-top: 60px;
  margin-left: 200px;
  .item{
    float: left;
    width: 150px;
    text-align: center;
    height: 40px;
  }
}
.lu{
    position: absolute;
    width: 100%;
    bottom: 250px;
    height: 180px;
    text-align: center;
    .ing{
        position: absolute;
        bottom: 15px;
        left: 300px;
        width: 150px;
        height: 150px;
        img {
            width: 150px;
            height: 150px;
        }
    }
    .reing{
        width: 106px;
        height: 106px;
        background-color: #e8e3e3;
        line-height: 106px;
        text-align: center;
        color: #cb5364;
        font-size: 33px;
        border-radius: 50%;
        position: absolute;
        right: 100px;
        top: 46px;
    }
    .shiting{
      position: absolute;
      left: 100px;
    }
}
.luTime{
    position: absolute;
    width: 100%;
    bottom: 180px;
    text-align: center;
    color: #cb5364;
    font-size: 28px;
}
.btn{
  position: absolute;
  bottom: 70px;
  width: 750px;
  height: 91px;
  background-image: url(../../assets/images/icon_upload.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 342px 91px;
}
.wave {
    width: 150px;
    height: 150px;
    text-align: center;
    line-height: 150px;
    .content{
        width: 100%;
        height: 100%;
        background-image: url(../../assets/images/icon_luyin.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 150px 150px;
    }
}

.wave .circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
}

/* 波纹效果 */
.wave.ripple .circle {
    width: calc(100% - 6px); /* 减去边框的大小 */
    height: calc(100% - 6px);/* 减去边框的大小 */
    border: 3px solid #fff;
}

.wave.ripple .circle:first-child {
    animation: circle-opacity 2s infinite;
}

.wave.ripple .circle:nth-child(2) {
    animation: circle-opacity 2s infinite;
    animation-delay: .3s;
}

.wave.ripple .circle:nth-child(3) {
    animation: circle-opacity 2s infinite;
    animation-delay: .6s;
}

.wave.ripple.danger {
    color: red;
}

.wave.ripple.danger .circle {
    border-color: red;
}

.wave.ripple.warning {
    color: orange;
}

.wave.ripple.warning .circle {
    border-color: orange;
}

/* 波动效果 */
.wave.solid .circle{
    width: 100%;
    height: 100%;
    background: #fff;
}

.wave.solid .circle:first-child {
    animation: circle-opacity 2s infinite;
}

.wave.solid.danger {
    color: red;
}

.wave.solid.danger .circle{
    background: red;
}

.wave.solid.warning {
    color: orange;
}

.wave.solid.warning .circle{
    background: orange;
}

@keyframes circle-opacity{
    from {
        opacity: 1;
        transform: scale(0);
    }
    to {
        opacity: 0;
        transform: scale(1);
    }
}
</style>
